<template>
    <div>
        <div class="fun">
            <el-button type="primary" plain @click="tableData.push({ ...field })">添加字段</el-button>
        </div>
        <div class="table">
            <el-table border empty-text="暂无数据" :data="tableData"
                :header-cell-style="{ background: 'var(--table-title-color)', color: 'var(--table-title-font-color)' }">
                <el-table-column prop="fieldCnNm" label="字段中文名" min-width="150">
                    <template #default="{ row }">
                        <el-input clearable v-model="row.fieldCnNm" placeholder="请输入字段中文名">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="fieldEnNm" label="字段英文名" min-width="150">
                    <template #default="{ row }">
                        <el-input clearable v-model="row.fieldEnNm" placeholder="请输入字段英文名">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="fieldType" label="字段类型" min-width="150">
                    <template #default="{ row }">
                        <el-select clearable v-model="row.fieldType" placeholder="请选择字段类型">
                            <el-option label="普通文本" value="0" />
                            <el-option label="多行文本" value="1" />
                            <el-option label="数字" value="2" />
                            <el-option label="日期" value="3" />
                            <el-option label="时间" value="4" />
                            <el-option label="时间日期" value="5" />
                            <el-option label="图片" value="6" />
                            <el-option label="文件" value="7" />
                            <el-option label="选择器" value="8" />
                            <el-option label="单选框" value="9" />
                            <el-option label="评分" value="10" />
                            <el-option label="表格" value="11" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="dictCode" label="字段配置" min-width="150">
                    <template #default="{ row }">
                        <el-input v-if="row.fieldType === '8' || row.fieldType === '9'" clearable v-model="row.dictCode"
                            placeholder="请输入字典编码">
                        </el-input>
                        <el-button v-else-if="row.fieldType === '11'" @click="toTableConf(row)">点击配置表格</el-button>
                        <el-input v-else disabled placeholder="无需配置">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="modifyFlag" label="允许修改" min-width="150">
                    <template #default="{ row }">
                        <el-select clearable v-model="row.modifyFlag" placeholder="请选择是否允许修改">
                            <el-option label="是" value="0" />
                            <el-option label="否" value="1" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="requiredFlag" label="是否必输项" min-width="150">
                    <template #default="{ row }">
                        <el-select clearable v-model="row.requiredFlag" placeholder="请选择是否必输项">
                            <el-option label="是" value="0" />
                            <el-option label="否" value="1" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" min-width="150">
                    <template #default="{ row }">
                        <el-input-number v-model="row.sort" :min="0" :max="999" size="default" />
                    </template>
                </el-table-column>
                <el-table-column :fixed="$isMobile() ? false : 'right'" label="操作" width="80">
                    <template #default="scope">
                        <el-button text type="primary" size="small"
                            @click="tableData.splice(scope.$index, 1)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <tableConf ref="tableCf" @sendData="callback"></tableConf>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus'
import tableConf from './tableConf.vue';
const props = defineProps({
    initData: {
        type: Array,
        default: () => { }
    }
})
watch(() => props.initData,
    (newInitData) => {
        tableData.value = newInitData
    }
)
const field = {
    fieldEnNm: '',
    fieldCnNm: '',
    fieldType: null,
    modifyFlag: '1',
    requiredFlag: '0',
    sort: 0,
    tableFlag: '1',
    tableFields: []
}
const tableData = ref([])
const tableCf = ref(null)
const validateFlag = ref(false)
const validate = async () => {
    if (tableData.value.length > 0) {
        judgeTable()
        validateFlag.value = true
    } else {
        validateFlag.value = false
        ElMessage.warning('表单配置不能为空！')
    }
}

const judgeTable = () => {
    tableData.value.forEach((item, index) => {
        if (!item.fieldCnNm || !item.fieldEnNm || !item.fieldType || !item.modifyFlag || !item.requiredFlag) {
            ElMessage.warning(`请把第${index + 1}行填写完整!`)
            throw new Error()
        } else if ((item.fieldType === '8' || item.fieldType === '9') && !item.dictCode) {
            ElMessage.warning(`请输入第${index + 1}行字典编码!`)
            throw new Error()
        } else if (item.fieldType === '11' && item.tableFields.length === 0) {
            ElMessage.warning(`请配置第${index + 1}行表格配置!`)
            throw new Error()
        }
    })
}

const toTableConf = (row) => {
    if (!row.fieldCnNm || !row.fieldEnNm) {
        ElMessage.warning('请先配置该行前置属性！')
        return
    }
    tableCf.value.init(row)
}

const callback = (row) => {
    tableData.value.forEach(item => {
        if (item.fieldCnNm === row.fieldCnNm && item.fieldEnNm === row.fieldEnNm) {
            item.tableFields = row.tableFields
        }
    })
}


defineExpose({
    validate,
    validateFlag,
    businessFieldList: tableData
})
</script>
<style scoped lang="less"></style>